<template>
  <div>
    <el-container class="home-container" style="height: 60px; border: 1px solid #eee">
      <el-header class="usermanager">
        <h1>用户权限管理系统</h1>

        <!-- <a @click="logout" class="quit">安全退出</a> -->
        <div>
          <span class="uname">{{uname}}</span>
          <el-button type="danger" round @click="logout">退出</el-button>
        </div>
      </el-header>
    </el-container>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  data() {
    return {
        uname: "admin",
    };
  },
  methods: {
      logout() {
      this.$http.get("/login/userLogout").then(res=>{
        if(res.data==1){
           Message({ message: "退出登录成功", type: "success" });
        }else{
           Message({ message: "退出登录失败", type: "error" });
        }
      })
      sessionStorage.removeItem("Name");
      sessionStorage.clear();
      this.$router.push({ path: "/login" });
      
    }
  },
  mounted () {
    this.uname=sessionStorage.getItem("Name")
  }
};
</script>
<style lang='less' scoped>
.home-container {
  height: 100%;
  width: 1366px;
}
.usermanager {
  background-color: #303133c2;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.uname {
  margin-right: 20px;
}
</style>